<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<view class="label">头像</view>
				<view class="content">
					<image src="../../static/images/default-avatar.png" class="avatar" mode="" v-if="!userInfo.sysUser.avatar" @tap="uploadAvatar"></image>
					<image :src="userInfo.sysUser.avatar | formatFile" class="avatar" mode="" v-else @tap="uploadAvatar"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">昵称</view>
				<view class="content">
					<input type="text" placeholder="请输入昵称" v-model="userInfo.sysUser.nickName">
				</view>
			</view>
			<view class="form-item">
				<view class="label">手机号</view>
				<view class="content">
					<button open-type="getPhoneNumber" class="phone-btn picker-placeholder" @getphonenumber="getphonenumber" v-if="!userInfo.sysUser.phonenumber">获取手机号</button>
					<view class="" v-else>{{userInfo.sysUser.phonenumber}}</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">英文名</view>
				<view class="content">
					<input type="text" placeholder="请输入英文名" v-model="userInfo.englishName">
				</view>
			</view>
			<view class="form-item">
				<view class="label">年龄</view>
				<view class="content">
					<input type="number" maxlength="3" placeholder="请输入年龄" v-model="userInfo.age">
				</view>
			</view>
		</view>
		<view class="bottom-btn-wrapper">
			<view class="submit-btn btn" @tap="setUserInfo">保存修改</view>
			<view class="logout-btn btn" @tap="showLogoutModal">退出登录</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getWechatPhone,
		setUserInfo
	} from '@/api/user.js'
	import { logout } from '@/utils/login.js'
	import { uploadImage } from '@/utils/upload.js'
	import validate from '@/utils/validate.js'
	
	export default {
		data() {
			return {
				userInfo: {
					sysUser: {}
				},
			};
		},
		onLoad(){
			this.getUserInfo()
		},
		methods:{
			getUserInfo(){
				getUserInfo().then(res => {
					this.userInfo = res.data
				})
			},
			getphonenumber(e){
				if(e.target.errMsg === 'getPhoneNumber:fail user deny'){
					return this.toast('用户已取消')
				}
				getWechatPhone({code: e.detail.code}).then(res => {
					this.userInfo.sysUser.phonenumber = res.data.phoneNumber
				})
			},
			setUserInfo(){
				// if(!validate.isNotEmpty(this.userInfo.englishName, '英文名')) return
				// if(!validate.isNotEmpty(this.userInfo.age, '年龄')) return
				setUserInfo(this.userInfo).then(res => {
					this.toast('修改成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			uploadAvatar(){
				uploadImage().then(res => {
						this.userInfo.sysUser.avatar = res.fileName
				})
			},
			showLogoutModal(){
				this.$refs.modal.open({
					content: '确认退出吗？',
					success: () => {
						logout()
						uni.showToast({
							icon: 'none',
							title: '退出登录成功'
						})
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/mine/index'
							})
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background: #F3F3F3;
		padding-top: 1rpx;
		
		.form{
			margin-top: 30rpx;
			
			.phone-btn{
				border: 0;
				line-height: 1;
				outline: none;
				background: transparent;
				margin:0;
				font-size: 28rpx;
				padding: 0;
			}
			
			.phone-btn::after{
				border:0;
			}
		}
	}
	
	.avatar{
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
	}
	
	.bottom-btn-wrapper{
		background-color: transparent;
		box-shadow: 0 0 0;
		
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			flex:1;
			height: 100rpx;
			width: 346rpx;
			background: #EC1328;
			border-radius: 50rpx;
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.btn:first-of-type{
			margin-right: 30rpx;
		}
		
		.submit-btn{
			background-color: $theme-color;
		}
	}
</style>
